<template>
  <div class="detail-wrapper customer-detail-wrapper">
    <PageTitle title="返回客户列表" />

    <div class="detail-content">
      <el-scrollbar>
        <div class="detail-box">
          <!-- 左侧信息 -->
          <div class="detail-box-left">
            <!-- 上部显示信息 -->
            <div class="detail-box-left-top">
              <!-- 显示信息h2 -->
              <div class="detail-box-left-top-info-h2" v-if="detail.status!=='已到期'">
                  {{ detail.status }}
              </div>
              <!-- 灰色 -->
              <div class="detail-box-left-top-info-h2" style="color: gray;" v-else>
                  {{ detail.status }}
              </div>
              <!-- 显示信息span -->
              <div class="detail-box-left-top-info-span" v-if="detail.renewal">
                （自动续费中）
              </div>
              <div class="detail-box-left-top-info-span">
                （未开启自动续费）
              </div>
              <!-- 显示信息 orange -->
              <div class="detail-box-left-top-info-orange">
                {{ detail.packageType }}
              </div>
            </div>
            <!-- 下方显示信息 --> 
            <div class="detail-box-left-bottom">
                订单号：  {{ detail.orderSn }}
            </div>
          </div>
          <!-- 右边信息 -->
          <div class="detail-box-right">
            <el-steps style="max-width: 800px" :active="detail.status=='已到期'?2:1" align-center>
              <el-step title="下单时间" :description="detail.orderTime" />
              <el-step title="订阅到期时间" :description="detail.expiredAt" />
            </el-steps>
          </div>
        </div>

        <div class="detail-box detail-box-1">
          <div class="detail-title">支付订单明细</div>
          <div class="content-box">
            <ct-table :options="tableOptions">
              <template v-slot:index="scope">
                <span>{{ scope.row.index }}</span>
              </template>
              <template v-slot:payType="scope">
                <span>算力券余额</span>
              </template>
              <template v-slot:isSend="scope">
                <span>{{ scope.row.isSend === 0 ? '否' : '是' }}</span>
              </template>
              <template v-slot:status="scope">
                <span>{{ handleStatus(scope.row.status) }}</span>
              </template>
              <template v-slot:operate="scope">
                <el-text
                  type="primary"
                  @click="toDetail(scope.row)">
                  详情
                </el-text>
              </template>
            </ct-table>
            <!-- 实付总额 -->
            <div class="total-amount">
                <div class="title">实付总额:</div>
                <div class="amount">￥{{ detail.totalMoney }}</div>
            </div>
      
            <ct-pagination
              :options="pageOptions"
              :pageEvent="getOrderInfo">
            </ct-pagination>
          </div>
        </div>

        

      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
  import { getOrderDetail } from '@/api/index';
  import PageTitle from '@/components/PageTitle.vue';
  
  import { useRouter ,useRoute} from 'vue-router';
  const router = useRouter();
  const route = useRoute();

  const { proxy } = getCurrentInstance();

  import CtTable from '@/components/CtTable.vue';
  import CtPagination from '@/components/Pagination.vue';

  import { usePageOptions } from '@/hooks/usePageOptions';
  const { pageOptions } = usePageOptions();


  const detail = ref({});
  let tableOptions = reactive({
    data: [],
    loading: false,
    columns: [
      {
        label: '序号',
        prop: 'index',
        width: 80,
        isCustom: true
      },
      {
        label: '订阅周期',
        prop: 'paymentSubDuration'
      },
      {
        label:"订单原价",
        prop:'paymentOrderPrice'
      },
      {
        label: '支付价格',
        prop: 'paymentPayPrice',
      },
      {
        label: '支付方式',
        prop: 'payType',
        isCustom:true
      },
      {
        label: '支付时间',
        prop: 'paymentPayTime'
      },
      // {
      //   label: '算力券抵扣',
      //   prop: 'paymentVoucherPrice'
      // }
      {
        label: '订单类型',
        prop: 'paymentOrderType'
      }
    ] 
  });

function getOrderInfo() {
  tableOptions.loading = true;
  const { currentPage, pageSize } = pageOptions;
  getOrderDetail({
    orderId:route.query.orderId,
    userId: route.query.userId ,
    page: currentPage,
    pageSize
  }).then(res => {
    console.log(res);
    detail.value = res.data.data;
    const rows = res.data.data.payments;
    const total = res.data.totalElements
        if (rows.length) {
          for (let i = 0; i < rows.length; i++) {
            rows[i].index = proxy.$handleIndex(i, pageOptions);
            rows[i].payType = "算力券余额";
          }
        }
        tableOptions.data = rows;
        tableOptions.loading = false;
        pageOptions.total = total;
  })      
  .catch(() => {
        tableOptions.loading = false;
  });;
}


onMounted(() => {
  // getMemberInfo();
  getOrderInfo();
});

function initLineChart() {
  let chartDom = document.getElementById('chartBox');
  if (!chartDom) {
    return;
  } else {
    echarts.dispose(chartDom);
  }

  setTimeout(() => {
    console.log(detail.value.monthList);
    let myChart = echarts.init(chartDom);
    let option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        top: '8%',
        left: '5%',
        right: '5%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: detail.value.monthList.month || []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '预付费',
          type: 'line',
          stack: 'Total',
          data: detail.value.monthList.oneMoneyList || []
        },
        {
          name: '后付费',
          type: 'line',
          stack: 'Total',
          data: detail.value.monthList.twoMoneyList || []
        }
      ]
    };

    myChart.setOption(option, true);
  }, 300);
}


</script>

<style lang="scss" scoped>
.customer-detail-wrapper {
  .base-info {
    .info-box {
      display: flex;
      align-items: center;

      &:first-of-type {
        margin-bottom: 40px;
      }

      .item {
        min-width: 200px;
        margin-right: 20px;

        p {
          &:nth-of-type(1) {
            margin-bottom: 10px;
            color: #888;
          }

          .el-text {
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .item-content {
          display: flex;
          align-items: center;

          .el-text {
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .data-info {
    .data-top-box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .item-box {
        width: 46%;

        .amout-box {
          margin-bottom: 10px;

          p {
            &:nth-of-type(1) {
              margin-bottom: 10px;
              color: #888;
            }
          }
        }

        .process-box {
          .process-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            .tag-name {
              flex-shrink: 0;
              margin-right: 10px;
              color: #888;
            }

            .tag-content {
              flex: 1;
              display: flex;
              align-items: center;

              .el-progress {
                flex: 1;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }

    .data-bottom-box {
      height: 200px;
    }
  }
}
.text-btn {
  text-align: left;
  margin: 0 !important;
}
.demo-tabs-auto-height {
  height: 480px;
  overflow-y: auto;
}
.detail-box{
  height: 190px;
  .detail-box-left{
    height: 150px;
    width: 25%;
    border-right: 1px solid #e7e4e4;
    float: left;
    .detail-box-left-top{
      height: 40%;
      width: 80%;
      margin:0% auto;
      padding-top: 20px;
      .detail-box-left-top-info-h2{
        font-size: 25px;
        color: #03d211;
        font-weight: 700;
        float: left;
      }
      .detail-box-left-top-info-span{
        line-height: 25px;
        color: #888;
        float: left;
      }
      .detail-box-left-top-info-orange{
        float: left;
        margin-top: 3px;
        line-height: 20px;
        margin-left: 10px;
        color: #fff;
        background-color: #fc8728;
      }
    }
    .detail-box-left-bottom{
      height: 40%;
      width: 80%;
      margin:0% auto;
      padding-top: 20px;
      color: #beaeae;
    }
  }
  .detail-box-right{
    float: left;
    width: 60%;
    height: 100px;
    margin-top: 40px;
  }
}
.detail-box-1{
  height: 600px;
  position: relative;
  .detail-title{
    height: 50px;
    width: 100%;
    font-size: 20px;
    color: #888;
  }
  .content-box{
    height: 450px;
  }
  .total-amount{
    position: absolute;
    bottom: 50px;
    width: 220px;
    font-weight: 700;
    color: #888;
    .title{
      float: left;
    }
    .amount{
      float: left;
      margin-left: 10px;
    }
  }
}
</style>
